<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!--
    胡文 qq:986776
     *自定义代码生成器
    -->
    <meta charset="UTF-8">
    <title>BeComment信息</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"></link>
    <script src="js/jquery.min.js"></script>
    <script src="js/vue3.js"></script>
    <script type="text/javascript" src="js/bootstrap.bundle.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="app" class="container">
    <!--查询模块-->
    <div class="row">
        <div class="col-12 text-right">
            <form class="form-group form-inline justify-content-end">
                <input class="form-control w-50 mr-sm-2" type="search" v-model="beComment.str" placeholder="请输入查询字符">
                <button class="btn btn-outline-success " @click.prevent="load()">查询</button>
            </form>
        </div>
    </div>  <!--查询模块结束-->
    <table class="table table-hover table-bordered">
        <tr>
            <td v-text="'id'"></td>
            <td v-text="'orderno'"></td>
            <td v-text="'datee'"></td>
            <td v-text="'empid'"></td>
            <td v-text="'comment'"></td>
        </tr>
        <tr v-for="o in list">
            <td v-text="o.id"></td>
            <td v-text="o.orderno"></td>
            <td v-text="o.datee"></td>
            <td v-text="o.empid"></td>
            <td v-text="o.comment"></td>
        </tr>
    </table>
    <!--分页-->
    <!--显示分页信息-->
    <div class="row  text-right">
        <!--文字信息-->
        <div class="col-md-6">
            当前第 <input name="startPage" :value="pageInfo.pageNum" style="width: 20px"/>/{{pageInfo.pages}}页.一共
            {{pageInfo.total}}条记录
        </div>
        <!--点击分页-->
        <div class="col-md-6">
            <nav aria-label="Page navigation example">
                <ul class="pagination">
                    <li class="page-item"><a class="page-link" href="javascript:" @click="pageInfo.pageNum=1;load( )">首页</a>
                    </li>
                    <li class="page-item" :class="{'disabled':!pageInfo.hasPreviousPage}">
                        <a class="page-link" href="javascript:" @click="pageInfo.pageNum=pageInfo.pageNum-1;load()"
                           aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item" v-for="p in pageInfo.navigatepageNums"
                        :class="{'active':pageInfo.pageNum==p}"><a class="page-link" href="javascript:"
                                                                   @click="pageInfo.pageNum=p;load()" v-text="p"></a>
                    </li>
                    <li class="page-item" :class="{'disabled':!pageInfo.hasNextPage}">
                        <a class="page-link" href="javascript:" @click="pageInfo.pageNum=pageInfo.pageNum-0+1;load()"
                           aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    <li class="page-item"><a class="page-link" href="javascript:"
                                             @click="pageInfo.pageNum=pageInfo.pages;load()">尾页</a></li>
                </ul>
            </nav>
        </div>
    </div>
    <!--分页结束-->
</div>
<script>
    var app = Vue.createApp({
        data() {
            return {
                UsUser: {
                    id: '',
                    orderno: '',
                    datee: '',
                    empid: '',
                    comment: '',
                    pageNum: '1',
                    //pageSize:'10' ,
                    str: '',
                },
                list: [],
                pageInfo: {}
            }
        }, methods: {
            load() {
                this.beComment.pageNum = this.pageInfo.pageNum;
                $.getJSON("/beComment/queryByLike2", this.beComment, (json) => {
                    this.pageInfo = json.data.pageInfo;
                    this.list = json.data.pageInfo.list;
                });
            }
        }, mounted() {
            this.load();
        }
    });
    app.mount("#app");
</script>
</body>
</html>
